<template>
    <div class="circulationModel" v-if="visible">
        <div class="circulationModel-head">
            <span>{{ t(`yl.CirculationTitle`) }} </span>
            <div><a-button type="primary">流转</a-button> <a-button @click="handleCancle">返回</a-button></div>
        </div>
        <div class="circulationModel-main">
            <div class="circulationModel-left">
                <span class="circulationModel-title">设备信息</span>
                <div class="circulationModel-item">
                    <span class="active">{{ t(`yl.deviceCode`) }} </span>
                    <span>{{ state.deviceCode }}</span>
                </div>

                <div class="circulationModel-item">
                    <span class="active">{{ t(`yl.tagColourName`) }} </span>
                    <span>{{ state.tagColourName }}</span>
                </div>

                <div class="circulationModel-item">
                    <span class="active">{{ t(`yl.tagRatioName`) }} </span>
                    <span>{{ state.tagRatioName }}</span>
                </div>

                <div class="circulationModel-item">
                    <span class="active">{{ t(`yl.priceIsLight`) }} </span>
                    <span>{{ state.priceIsLight ? '是' : '否' }}</span>
                </div>
                <div class="circulationModel-item">
                    <span class="active">{{ t(`yl.priceIsWater`) }} </span>
                    <span>{{ state.priceIsWater ? '是' : '否' }}</span>
                </div>
                <div class="circulationModel-item">
                    <span class="active">{{ t(`yl.power`) }} </span>
                    <span>{{ state.power }}</span>
                </div>
            </div>
            <div class="circulationModel-right">
                <a-timeline>
                    <a-timeline-item color="#ccc" v-for="(item, index) in state.item" :key="index">
                        {{ item.createdTime }}
                        <span class="yellow"> {{ item.merchantName }}</span>

                        {{ typeData(item.type) }}
                    </a-timeline-item>
                </a-timeline>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, toRefs } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';
import ylTreeselectVue from '@/components/ylTreeselect.vue';
import columns from './circulationModelColumns';
import { getStockRecord } from '@/api/device';
import { TableState, CheckAble, Pagination, PaginationQuery } from '@/types/table';

interface DeptState {
    deviceCode: string;
    specsCode: string | number;
}

export default defineComponent({
    name: 'roleModel',
    components: {
        ylTreeselectVue,
    },
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        dept: {
            type: Object,
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const statusList = reactive([
            {
                value: false,
                label: '离线',
            },
            {
                value: true,
                label: '在线',
            },
        ]);
        // 角色信息
        const tableQuery: PaginationQuery = reactive({
            deviceCode: '',
        });
        // const state = reactive({
        //     deviceCode: '',
        //     tagColourName: '',
        //     tagRatioName: '',
        //     priceIsLight: '',
        //     priceIsWater: '',
        //     power: '',
        //     item: [],
        // });
        const state: NormalObj = ref({
            deviceCode: '',
            tagColourName: '',
            tagRatioName: '',
            priceIsLight: '',
            priceIsWater: '',
            power: '',
            item: [],
        });

        const showModal = computed(() => props.visible);
        // 设置table row key
        const setRowKey = (record: { [x: string]: any }) => record.id;

        const formState: DeptState = reactive({
            deviceCode: '',
            specsCode: '',
        });

        // 编辑时赋值;
        watch(
            () => props.dept,
            (dept) => {
                console.log(dept);
                const { deviceCode, specsCode } = dept as DeptState;
                tableQuery.deviceCode = deviceCode;

                getHeartbeatData(tableQuery);
            }
        );

        // 表单校验

        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };
        // 获取table数据
        const getHeartbeatData = async (tableQuery: PaginationQuery) => {
            const { content } = await getStockRecord(tableQuery);
            state.value = content;
        };
        const typeData = (type: string) => {
            let text = '';
            switch (type) {
                case '1':
                    text = '生产';
                    break;
                case '2':
                    text = '入库';
                    break;
                case '3':
                    text = '出库';
                    break;
                case '4':
                    text = '转库';
                    break;
                case '5':
                    text = '回收';
                    break;
                default:
                    text = '激活';
                    break;
            }

            return text;
        };

        return {
            showModal,
            columns,
            formState,
            statusList,
            state,
            tableQuery,
            t,
            handleCancle,
            setRowKey,
            typeData,
        };
    },
});
</script>
<style lang="scss" scoped>
.circulationModel {
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    .circulationModel-head {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
    .circulationModel-main {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .circulationModel-left {
            width: 280px;
            border: 1px solid rgba(215, 215, 215, 100);
            padding: 10px;
            border-radius: 10px;
            background: #f9f9f9;
            .circulationModel-title {
                font-size: 14px;
            }
            .circulationModel-item {
                background: #fff;
                padding: 5px;
                display: flex;
                justify-content: space-between;
                margin-top: 15px;
                font-size: 12px;
                .active {
                    color: #999;
                }
            }
        }
        .circulationModel-right {
            flex: 1;
            background: #f9f9f9;
            border: 1px solid rgba(215, 215, 215, 100);
            margin-left: 15px;
            border-radius: 10px;
            padding: 10px;
            .yellow {
                color: #ff6702;
            }
        }
    }
}
</style>
